import { Button, Drawer, DrawerProps, Modal, Select, Spin, message } from "antd"
import TextArea from 'antd/es/input/TextArea'

import { memo, useEffect, useRef, useState } from "react";
import { getAssignUserList } from "../../../service/syscontroller";
import { QueryObserverResult, RefetchOptions, RefetchQueryFilters } from "react-query";
import { IWokrStatistic } from "../../../service/beef/beef-service";
import { useAddBeefSolveStep ,usePushAppointBeefSolveStep} from "../../../service/beef/beef-solve-service";


type IStepFormParams = {
       beefId?: string;
       open: boolean;
       openFn: (open: boolean) => void;
       refetch: <TPageData>(options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined) => Promise<QueryObserverResult<IWokrStatistic, unknown>>;
} & DrawerProps

const AssignForm = ({ beefId, open, openFn, refetch }: IStepFormParams) => {

       const [option, setOption] = useState<{
              value: string,
              label: string,
       }[]>();

       /**
        * !获取指派的人员
        */
       const { isLoading, data: dataSource } = getAssignUserList();
        //综治中心指派给社区书记
        const {mutateAsync:pushAppointMutation} = usePushAppointBeefSolveStep()
       /**
        * !添加矛盾纠纷步骤;
        */
       const { mutateAsync: addMutation, isLoading: addIsLoading } = useAddBeefSolveStep();

       useEffect(() => {
              const arr: {
                     value: string,
                     label: string,
              }[] = []
              if (dataSource && dataSource.length > 0) {
                     dataSource.forEach(e => {
                            arr.push({
                                   value: e.sysId,
                                   label: e.sysName
                            },)
                     })
                     setOption(arr)
              }
       }, [dataSource])


       const selectRef = useRef<string>();

       const handleChange = (value: string) => {
              selectRef.current = value;
       };
      const [msg, setMsg] = useState<string>();
       
       const handleInputValue :React.ChangeEventHandler<HTMLTextAreaElement>  = (value)=>{
        
        setMsg(value.target.value);
       }

       const assignOk = async () => {        
              if (!beefId) {
                     return;
              }
              if (!selectRef.current) {
                     message.error("请选择用户");
                     return;
              }
              
              await pushAppointMutation({ beefId, pointUserId: selectRef.current ,desp:msg});
              openFn(false);
              refetch();
       }
       return <Modal confirmLoading={isLoading || addIsLoading} title="指派人员处理" open={open} onOk={() => assignOk()} onCancel={() => openFn(false)} okText="确认" cancelText="取消">
              <Select
                     showSearch
                     style={{ width: '100%' }}
                     placeholder=""
                     onChange={handleChange}
                     optionFilterProp="children"
                     filterOption={(input, option) => (option?.label ?? '').includes(input)}
                     filterSort={(optionA, optionB) =>
                            (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
                     }
                     options={option}
              />
            <TextArea style={{marginTop:'20px'}} rows={4} placeholder="填写描述及诉求" onChange={handleInputValue} />

       </Modal>
}


export default memo(AssignForm)